/**
 * 选择文件并保存到window.UploadFile
 * 不使用返回值或者回调函数的原因是：
 * 在文件数量随时会根据用户点击删除按钮挥着继续添加按钮而减少或增多
 * @author hw
 * @param {String} el 选择器
 */
function upload(el) {
    const root = document.querySelector(el);
    // input上传文件原生控件
    const fileEl = root.querySelector("input[type=file]");
    // 上传的文件存储列表
    const files = [];
    // 文件名展示列表
    const filenameEl = root.querySelector('.file-name');

    fileEl.addEventListener('change', e => {
        // 遍历原生上传文件控件文件列表，添加到文件存储列表
        Array.prototype.forEach.call(e.target.files, item => {
            files.push(item);
            const filename = item.name;

            // 创建dom
            const div = document.createElement('div');
            const span = document.createElement('span');
            const button = document.createElement('button');
            const span2 = document.createElement('span');

            // span插入文件名
            span.innerText = filename;
            span2.innerHTML = '&times;'
            button.setAttribute('type', 'button');
            button.setAttribute('class', 'close');

            button.appendChild(span2);
            div.appendChild(span);
            div.appendChild(button);
            // div插入页面
            filenameEl.appendChild(div);

            // 绑定删除按钮事件 此处有闭包 冲刺二优化
            span2.addEventListener('click', e => {
                // 删除文件
                const i = files.indexOf(item)
                files.splice(i, 1);
                // 删除页面文件名
                filenameEl.removeChild(div)
            }, false)
        })
    })

    root.querySelector('button.btn').addEventListener('click', selectFileHandle, false);

    function selectFileHandle() {
        fileEl.click()
    }

    const id = fileEl.parentNode.getAttribute('id');
    window.uploadFiles = window.uploadFiles
        ? window.uploadFiles 
        : {};
    window.uploadFiles[id] = files
}